<style lang="less" rel="stylesheet/less">
  .bargain-wrapper {
    background: #fff;

    .cover {
      width: 100%;
      max-width: 100%;
      img {
        width: 100%;
      }
    }

    .p-tit {
      font-size: 36/75rem;
      margin-bottom: 44/75rem;
      color: #333;
    }

    .info {
      text-align: center;
      font-size: 30/75rem;
      color: #ccc;
      padding-top: 25/75rem;

      .p-name {
        font-size: 36/75rem;
        color: #333;
      }
      .p-num {
        margin-top: 20/75rem;
        span {
          color: #ffb230;
        }
      }
      .p-price {
        margin-top: 45/75rem;
      }
      .p-price-num {
        font-size: 62/75rem;
        font-weight: bold;
        color: #ffb230;
        margin-top: 10/75rem;
      }
      .p-btn{
        display: block;
        width: 262/75rem;
        height: 78/75rem;
        margin: 0 auto;
        background-color: #122a50;
        border-radius: 39/75rem;;
        margin-top: 29/75rem;
        color: #fff;
        line-height: 78/75rem;;
        text-align: center;
        &:active{
          background-color: lighten(#122a50,10%);
        }
      }
    }
    .process {
      display: flex;
      margin-top: 45/75rem;
      justify-content: space-around;
      align-items: center;
      padding: 0 30/75rem;
      .p-price {
        width: 93/75rem;
        text-align: center;
        span {
          display: block;
          font-size: 22/75rem;
          &:first-child {
            font-size: 42/75rem;
            color: #ffb230;
          }
        }
      }
      .process-bar {

        flex: 1;
        height: 28/75rem;
        background: #914c0e;
        border-radius: 14/75rem;
        position: relative;
        margin: 0 50/75rem;

        .p-complete {
          display: block;
          border-radius: 14/75rem;
          height: 28/75rem;
          width: 50%;
          background-color: #ffdf30;
        }
        .p-handle {
          position: absolute;
          height: 56/75rem;
          top: -14/75rem;
          left: 0;
          line-height: 56/75rem;
          padding: 0 20/75rem;
          background-color: #914d0e;
          font-size: 23/75rem;
          color: #fff;
          border-radius: 10/75rem;
          transform: translate(-50%, 0);

        }
      }
    }
    .btn-menu {
      padding: 30/75rem;
      display: flex;
      justify-content: space-between;
      a {
        display: block;
        height: 87/75rem;
        width: 45%;
        background-color: #ffb230;
        text-align: center;
        line-height: 87/75rem;
        font-size: 36/75rem;
        color: #fff;
        border-radius: 20/75rem;
        &:active {
          background-color: lighten(#ffb230, 10%);
        }
      }
    }
    .tip {
      display: flex;
      padding: 0 30/75rem;
      margin-top: 80/75rem;
      .p-face {
        width: 120/75rem;
        height: 120/75rem;
        border-radius: 50%;
        overflow: hidden;
      }
      .p-right {
        flex: 1;
        margin-left: 26/75rem;
        font-size: 30/75rem;
      }
      .p-message {
        margin-top: 15/75rem;
        background-color: #ffb230;
        color: #fff;
        padding: 20/75rem 30/75rem;
        border-radius: 15/75rem;
      }
    }
    .friends {
      padding: 0 30/75rem;
      font-size: 30/75rem;
      margin-top: 95/75rem;
      .p-empty {
        line-height: 60/75rem;
      }
      ul {
        li {
          line-height: 60/75rem;
          display: flex;
          justify-content: space-between;
          span {
            display: block;
            width: 33.3%;
            &:first-child {
            }
            &:nth-child(2) {
              color: #ffb230;
              text-align: center;
            }
            &:last-child {
              text-align: right;
            }
          }
        }
      }
    }
    .rule {
      margin-top: 68/75rem;
      padding: 0 30/75rem;
      font-size: 30/75rem;
      p {
        line-height: 1.5;
        margin: 10/75rem 0;
      }
    }
    .footer {
      margin-top: 30/75rem;
      text-align: center;
      font-size: 30/75rem;
      padding: 24/75rem;
      color: #333;
    }
    .kan-success {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background-color: rgba(0, 0, 0, .3);

      .inner {
        width: 500/75rem;
        height: 500/75rem;
        background-color: #fcd16d;
        border-radius: 50%;
        color: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        font-size: 70/75rem;
        text-align: center;
        span {
          color: #ff6c00;
          line-height: 1.5;
        }
      }
    }
    .share-tip {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .4);
      background-image: url("../../assets/renegade/tip.png");
      background-repeat: no-repeat;
      background-position: right top;
      background-size: 103/75rem 105/75rem;
      z-index: 800;
      p {
        text-align: center;
        color: #fff;
        font-size: 42/75rem;
        padding-top: 135/75rem;
      }
    }
    .share-detail{
      padding-top: 33/75rem;
      .title{
        text-align: center;
        font-size: 36/75rem;
        color: #000;
        margin-bottom: 46/75rem;
      }
      img{
        display: block;
        width: 100%;
        &[lazy=loading] {
          background-color: #f0f0f0;
        }
      }
    }
    .rocket-box{
      position: fixed;
      z-index: 900;
      right: 30/75rem;
      bottom: 95/75rem;
      svg{
        width: 168/75rem ;
        height: 168/75rem ;
        fill: #ffb331;
      }
    }
  }
  .rocket-enter-active, .rocket-leave-active {
    transition: all .5s
  }
  .rocket-leave-active{
    transform: translate(0 , -200%);
  }
  .rocket-enter{
    transform: translate(0 , 200%);
  }
  .rocket-enter, .rocket-leave-active  {
    opacity: 0
  }
  .kan-enter-active, .kan-leave-active {
    transition: opacity .3s;
    .inner {
      transition: opacity .3s;
    }
  }

  .kan-enter, .kan-leave-active {
    opacity: 0
  }
</style>

<template>
  <div class="bargain-wrapper" >
    <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute;width: 0;height:0;left: 0;top: 0;">
      <symbol id="rocket" viewBox="0 0 1024 1024">
        <path d="M767.1,438.9C771.2,143,526.7,9.6,510-0.1l0,0l0,0l0,0l0,0C493.4,8.2,248.8,143,253,438.9c-50,32-101.4,88.9-93.1,187.6
		c8.3,98.6,104.2,164,141.7,159.8c36.1-4.2,26.4-30.6,26.4-30.6l12.5-51.4c0,0,54.2,82,72.2,82c15.3-1.4,90.3,0,98.6,0l0,0l0,0l0,0
		l0,0c8.3,0,83.4-1.4,98.6,0c18.1,0,72.2-82,72.2-82l12.5,51.4c0,0-11.1,27.8,26.4,30.6c36.1,4.2,133.4-61.1,141.7-159.8
		C868.5,527.8,817.1,470.9,767.1,438.9L767.1,438.9z M510,433.3c-6.9,0-97.3-2.8-107-109.8c2.8-100,98.6-109.8,107-109.8
		c6.9,0,102.8,9.7,107,109.8C608.7,430.6,517,433.3,510,433.3L510,433.3z M455.8,943.3c0,12.5-9.7,22.2-22.2,22.2l0,0
		c-12.5,0-22.2-9.7-22.2-22.2v-107c0-12.5,9.7-22.2,22.2-22.2l0,0c12.5,0,22.2,9.7,22.2,22.2V943.3L455.8,943.3z M536.4,1001.6
		c0,12.5-9.7,22.2-22.2,22.2l0,0c-12.5,0-22.2-9.7-22.2-22.2V841.8c0-12.5,9.7-22.2,22.2-22.2l0,0c12.5,0,22.2,9.7,22.2,22.2V1001.6
		L536.4,1001.6z M610.1,918.3c0,12.5-9.7,22.2-22.2,22.2l0,0c-12.5,0-22.2-9.7-22.2-22.2v-76.4c0-12.5,9.7-22.2,22.2-22.2l0,0
		c12.5,0,22.2,9.7,22.2,22.2V918.3L610.1,918.3z"/>
      </symbol>
    </svg>
    <div v-if="renegade.isload">
      <div class="cover">
        <img src="../../assets/renegade/cover.png" alt="">
      </div>
      <div class="info">
        <div class="p-name">{{renegade.goodsInfo.goName}}</div>
        <div class="p-price">当前助力价</div>
        <div class="p-price-num">￥{{renegade.userInfo.pMoney}}</div>
        <a href="#" class="p-btn" @click.prevent="goDetail">查看详情</a>
      </div>
      <div class="process">
        <div class="p-price">
          <span class="p-num">¥{{renegade.goodsInfo.goPrice}}</span>
          <span class="p-title">售价</span>
        </div>
        <div class="process-bar">
          <span class="p-complete" v-bind:style="{width: process}"></span>
          <span class="p-handle" v-bind:style="{left: process}">{{renegade.userInfo.pMoney}}</span>
        </div>
        <div class="p-price">
          <span class="p-num">¥{{renegade.goodsInfo.goMinPrice}}</span>
          <span class="p-title">最低价</span>
        </div>
      </div>
      <div class="btn-menu" v-if="userType ==0">
        <a href="#" @click.prenvet="tipVisable = true">找亲友帮忙</a>
        <router-link :to="{name:'renegade'}">购买</router-link>
      </div>
      <div class="btn-menu" v-if="userType ==1">
        <a href="#" @click.prevent='bargain'>帮TA砍一刀</a>
        <a href="#" @click.prevent='play'>我也要玩</a>
      </div>
      <div class="tip">
        <div class="p-face">
          <img v-lazy="renegade.userInfo.uHeadPic" alt="">
        </div>
        <div class="p-right">
          <div class="p-name">
            {{renegade.userInfo.userName}}
          </div>
          <div class="p-message">
            <span v-if="renegade.bargainList.length===0">还没有人帮砍价，赶紧邀请朋友帮忙砍价吧！</span>
            <span v-else>已经有{{renegade.bargainList.length}}位好友助力了，共砍掉
￥{{renegade.goodsInfo.goPrice - renegade.userInfo.pMoney|price}}，是朋友就赶紧拔刀相助！ </span>
          </div>
        </div>
      </div>
      <div class="friends" v-if="userType ==0">
        <div class="p-tit">亲友团出力</div>
        <ul v-if="renegade.bargainList.length>0">
          <li v-for="(item,index) in  renegade.bargainList">
            <span>{{item.userName}}</span>
            <span>-{{item.bMoney|price}}元</span>
            <span>{{item.changeDate}}</span>
          </li>
        </ul>
        <div class="p-empty" v-else>目前还没有砍价记录</div>
      </div>
      <div class="rule">
        <div class="p-tit">
          活动详情
        </div>
        <p>1.活动时间：2017年5月26日— 2017年6月20日；</p>
        <p>2.活动规则：本次活动将分三波进行 ，<br>
          ·2017-05-26至2107-06-06 开通砍价通道，最高可砍至78元 <br>
          ·2017-06-07至2017-06-20日开通预售通道，预售价98元 <br>
          ·2017-06-21日起恢复售价128元</p>
        <p> 3.参与砍价方法：将自己的活动链接转发给你的好友帮你助力，就可获得减免，最高可减免至78元；<br>
          *点击好友链接中的“我也要玩”，即可生成你自己的活动链接哦</p>
        <p> 4.关于发货时间：此款商品为预购商品，拍下后会于6月20日开始陆续发货（根据下单的先后顺序发货）；</p>
        <p>5.配送方式：可选择自提或邮寄，选择自提将减免8元，自提的朋友请到指定的自提点提货（提货点：温州市-信河街-大士门大厦1幢105号鲜果园松台店）；</p>
        <p>6.本次预购范围仅限于温州地区（包括温州市区及其下县镇）；</p>
        <p>7.该活动最终解释权归果加果加所有。</p>
      </div>
      <div class="share-detail" ref="detail">
        <div class="title">商品详情</div>
        <img src="/static/renegade/lm_01.png" alt="">
        <img src="/static/renegade/lm_03.png" alt="">
        <img v-lazy="'/static/renegade/lm_04.png'" alt="">
        <img v-lazy="'/static/renegade/lm_05.png'" alt="">
        <img v-lazy="'/static/renegade/lm_06.png'" alt="">
        <img v-lazy="'/static/renegade/lm_07.png'" alt="">
        <img v-lazy="'/static/renegade/lm_08.png'" alt="">
        <img v-lazy="'/static/renegade/lm_09.png'" alt="">
        <img v-lazy="'/static/renegade/lm_10.png'" alt="">
        <img v-lazy="'/static/renegade/lm_11.png'" alt="">
        <img v-lazy="'/static/renegade/lm_12.png'" alt="">
        <img v-lazy="'/static/renegade/lm_13.png'" alt="">
        <img v-lazy="'/static/renegade/lm_14.png'" alt="">
        <img v-lazy="'/static/renegade/lm_15.png'" alt="">
      </div>
      <div class="footer">
        由果加果加提供技术支持 <br>
        www.gogagoga.cc
      </div>
    </div>
    <transition name="kan">
      <div class="kan-success" v-show="bargainVisable" @click.prevent='bargainVisable=false'>
        <div class="inner">
          <div>
            成功砍价 <br>
            <span>-￥{{bargainMoney}}</span>
          </div>
        </div>
      </div>
    </transition>
    <transition name="rocket">
      <div class="rocket-box" v-show="rocket" @click="goTop">
        <svg>
          <use xlink:href="#rocket"></use>
        </svg>
      </div>
    </transition>
    <div class="share-tip" v-show="tipVisable" @click="tipVisable = false">
      <p>
        点击右上角分享 <br><br><br>
        还不赶紧拉上小伙伴<br>
        一起砍！
      </p>
    </div>
  </div>
</template>
<script>
  import api from '@api'
  import {mapGetters} from 'vuex'
  import {isWechat} from '@utils'
  import MoveTo from 'moveto'
  export default {
    data() {
      return {
        userType: 0,
        bargainMoney: 0,
        bargainVisable: false,
        tipVisable: false,
        rocket: false
      }
    },
    computed: {
      ...mapGetters({
        renegade: 'backend/renegade/getData'
      }),
      process() {
        if (this.renegade.userInfo.pMoney > this.renegade.goodsInfo.goMinPrice && this.renegade.userInfo.pMoney < this.renegade.goodsInfo.goPrice) {
          return Math.abs(this.renegade.goodsInfo.goPrice - this.renegade.userInfo.pMoney) * 100 / (this.renegade.goodsInfo.goPrice - this.renegade.goodsInfo.goMinPrice) + '%';
        } else if (this.renegade.userInfo.pMoney <= this.renegade.goodsInfo.goMinPrice) {
          return '100%'
        } else if (this.renegade.userInfo.pMoney >= this.renegade.goodsInfo.goPrice) {
          return '0'
        }
      }
    },
    async mounted () {
      document.title = "楠溪峰高山蓝莓砍价通道";
      window.addEventListener('scroll', this.handleScroll);
      this.userType = this.$route.query.shareId ? 1 : 0;
      this.$store.dispatch('global/setLoading', true);
      if (this.userType) {
        await this.$store.dispatch('backend/renegade/getBargainData', this.$route.query.shareId)
      } else {
        await this.$store.dispatch('backend/renegade/getData', 'LM001')
      }
      this.$store.dispatch('global/setLoading', false);
      let wx = window.wx;
      let _this = this;
      if (this.$route.query.shareId && this.$route.query.shareId == this.renegade.userInfo.id) {
        this.userType = 0
      }
      wx.ready(function () {
        wx.onMenuShareTimeline({
          title: '人在江湖飘 快来砍一刀',
          link: 'https://shop.gogagoga.cc/renegade/share?shareId=' + _this.renegade.userInfo.id,
          imgUrl: 'https://shop.gogagoga.cc/static/wechat.png'
        })
        wx.onMenuShareAppMessage({
          title: '人在江湖飘 快来砍一刀',
          desc: '楠溪峰，高山大颗蓝莓，预购砍价，越早下手，越优惠。',
          link: 'https://shop.gogagoga.cc/renegade/share?shareId=' + _this.renegade.userInfo.id,
          imgUrl: 'https://shop.gogagoga.cc/static/wechat.png'
        })
      })
    },
    destroyed () {
      window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
      async bargain () {
        this.$store.dispatch('global/setLoading', true);
        let {data: {StatusCode, Status, bargainMoney}} = await api.post('api/v2/Bargain/bargainMoney.ashx',
          {goSn: 'LM001', bargain: this.$route.query.shareId});
        this.$store.dispatch('global/setLoading', false);
        if (StatusCode == 200) {
          this.bargainMoney = bargainMoney;
          await this.$store.dispatch('backend/renegade/getBargainData', this.$route.query.shareId)
          this.bargainVisable = true;
          setTimeout(() => {
            this.bargainVisable = false;
          }, 3000)
        } else {
          this.$store.dispatch('global/toast', Status);
        }
      },
      async play () {
        this.$store.dispatch('global/setLoading', true);
        await this.$store.dispatch('backend/renegade/getData', 'LM001');
        this.userType = 0;
        this.$store.dispatch('global/setLoading', false);
      },
      goDetail() {
        let moveTo = new MoveTo();
        moveTo.move(this.$refs.detail)
      },
      handleScroll() {
        let scroll = document.documentElement.scrollTop + document.body.scrollTop;
        let screenHeight = window.screen.height;
        if(scroll > screenHeight) {
          this.rocket = true
        } else {
          this.rocket = false
        }
      },
      goTop () {
        let moveTo = new MoveTo();
        moveTo.move(document.body)
      }
    }

  }
</script>
